<script setup>
import { ref,reactive, nextTick,onActivated,getCurrentInstance,onMounted, watch  } from 'vue'; 
import { useRoute,useRouter } from 'vue-router';
import { ElMessage,ElMessageBox  } from 'element-plus';
import TopBar from '@/components/Topbar/index.vue';
import getRules from "@/validUtils";
import { getMaterialsDetail } from '@/api/ShopDatabase/materials.js';
import { getBaseSetting,getAllCommodityExtraAttributes } from '@/api/ShopDatabase/goodsSetting.js'
import { getFieldValue } from '@/utils/common.js'
import { useDistInfoStore } from '@/stores/dict.js';
const distInfoStore = useDistInfoStore();
const backValue = ref('MaterialsManagementIndex');
const tabName = ref("查看物资");
const moduleType = ref("基础信息");
const route = useRoute();
const router = useRouter();
const form = ref({
    code:"",
    needValue:"1",
    category:"",
    businessBrandId:[],
    goodsName:"",
    barcode:"",
    mnemonicCode:"",
    specification:"",
    unit:"",
    origin:"",
    manufacturer:"",
    carriedStandard:"",
    activityImg:[],
    latestPurchasePrice:"",
})
const batchForm = ref({
    wholesaleInfoState:1,
    wholesaleInfoPrice:"",
    wholesaleInfoClassification:[],
    wholesaleInfoMinimumPurchase:1,
    wholesaleInfoDetails:"",
    wholesalepictureList:[],
    needValue:"1"
})
const useUsage = ref(
    [
        {
            usageTotalDose:"",
            usageUnit:"",
            usageWayOfUse:[],
            usageDosa:"",
            usageFrequency:"",
            usageDays:""
        },

    ]
);
const brandList = computed(()=>{
    return distInfoStore.getDistInfo("经营品牌").map(lis=>{
        return {
            value:lis.id,
            label:lis.permissionName
        }
    })
})
const getBrandName = (value)=>{
    let brandName = distInfoStore.getDistInfo("经营品牌").filter(lis=>{
        return value.includes(lis.id);
    }).map(lis=>{
        return lis.permissionName
    })
    return brandName.join(',');
}


const pageLoading = ref(false);
const uuid = ref(route.query.id || "");
const typeOptions = ref([]);
const _getBaseSetting = async ()=>{
    try{
        let result = await getBaseSetting();
        typeOptions.value =  getFieldValue('类别',result,'id');
        _getMaterialsDetail();
    }finally{

    }
}
_getBaseSetting()
const goodsAttributesList = ref([]);
const _getAllCommodityExtraAttributes = async ()=>{
    goodsAttributesList.value = [];
    try{
        let result = await getAllCommodityExtraAttributes();
        if(result.goodsAttributesList && result.goodsAttributesList.length>0){
            goodsAttributesList.value = result.goodsAttributesList.filter(value=>value.disabled == 0).map(lis=>{
                if(lis.fieldType == 3 || lis.fieldType == 4){
                    lis.optionContent = lis.optionContent.split(",").filter(value=>value!="")
                }
                if(lis.fieldType == 4){
                    return {...lis,fieldValue:[]};
                }else{
                    return {...lis,fieldValue:""};
                }

            })
            console.log(goodsAttributesList.value,222);
        }

    }catch(e){
        console.log(e);
    }
}
const _getMaterialsDetail = async ()=>{
    pageLoading.value = true;
    try{
        await _getAllCommodityExtraAttributes();
        let result = await getMaterialsDetail({id:uuid.value});
        form.value = {
            code:result.code,
            needValue:"1",
            category:typeOptions.value.find(item=>item.value==result.categoryId)?.label ?? '',
            businessBrandId:result.businessBrandId?result.businessBrandId.split(','):[],
            goodsName:result.goodsName,
            barcode:result.barcode,
            mnemonicCode:result.mnemonicCode,
            specification:result.specification,
            unit:result.unit,
            origin:result.origin,
            manufacturer:result.manufacturer,
            carriedStandard:result.carriedStandard,
            activityImg:result.goodsPictureList?result.goodsPictureList.map(value=>{
                return value.url
            }):[],
            latestPurchasePrice:result.latestPurchasePrice,
        }
        useUsage.value = [{
            usageTotalDose:result.usageTotalDose,
            usageUnit:result.usageUnit,
            usageWayOfUse:result.usageWayOfUse?result.usageWayOfUse.split(','):"",
            usageDosa:result.usageDosa,
            usageFrequency:result.usageFrequency,
            usageDays:result.usageDays,
        }]
        batchForm.value = {
            wholesaleInfoState:Number(result.wholesaleInfoState),
            wholesaleInfoPrice:result.wholesaleInfoPrice,
            wholesaleInfoClassification:result.wholesaleInfoClassification?result.wholesaleInfoClassification.split(','):[],
            wholesaleInfoMinimumPurchase:result.wholesaleInfoMinimumPurchase,
            wholesaleInfoDetails:result.wholesaleInfoDetails,
            wholesalepictureList:result.wholesalePictureList?result.wholesalePictureList.map(value=>{
              return value.url;  
            }):[],
            needValue:"1"

        }
        result.goodsAttributeList.forEach(info=>{
            goodsAttributesList.value.forEach(lis=>{
                if(info.extraAttributesId == lis.id){
                    lis.fieldValue = info.extraAttributesValue;
                }
            })
        })
    }catch(e){
        console.log(e);
    }finally{
        pageLoading.value = false;
    }
}
onActivated(()=>{
    if(uuid.value !== route.query.id){

        uuid.value = route.query.id;
        _getMaterialsDetail();
    }

})


</script>
<template>
    <div class="page-contain" >
        <TopBar :backValue="backValue" :tabName="tabName">
        </TopBar>
        <div class="info-contain" v-loading="pageLoading">
            <div class="btn-opea">
                <el-radio-group v-model="moduleType">
                    <el-radio-button label="基础信息" />
                    <el-radio-button label="批发信息" />
                </el-radio-group>
            </div>
            <div class="info-lis" v-show="moduleType == '基础信息'">

                <el-form :model="form" label-width="90px">
                    <div class="lis-head">
                        <div class="icon-view">
                            <div class="icon-view-on"></div>
                        </div>
                        <span class="label-name">基础属性</span>

                    </div>
                    <div class="lis-item">
                        <div class="lis-i">
                            <el-form-item label="物资编号：" >
                                {{ form.code || '-' }}
                            </el-form-item>
                        </div>
                        <div class="lis-i">
                            <el-form-item label="类别：" >
                                {{ form.category || '-'}}
                            </el-form-item>
                        </div>
                        <div class="lis-i">
                            <el-form-item label="经营品牌：" >
                                {{ getBrandName(form.businessBrandId) }} 
                            </el-form-item>
                        </div>
                    </div>
                    <div class="lis-item">
                        <div class="lis-i">
                            <el-form-item label="物资名称：" >
                                {{ form.goodsName || '-' }} 
                            </el-form-item>
                        </div>
                        <div class="lis-i">
                            <el-form-item label="条码：" >
                                {{ form.barcode || '-'}} 
                            </el-form-item>
                        </div>  
                        <div class="lis-i">
                            <el-form-item label="助记码：">
                                {{ form.mnemonicCode || '-' }} 
                            </el-form-item>
                        </div>

                    </div>
                    <div class="lis-item">
                        <div class="lis-i">
                            <el-form-item label="物资规格：" >
                                {{ form.specification || '-' }}   
                            </el-form-item>
                        </div>
                        <div class="lis-i">
                            <el-form-item label="单位：" >
                                {{ form.unit || '-' }}     
                            </el-form-item>
                        </div>  
                        <div class="lis-i">
                            <el-form-item label="产地：">
                                {{ form.origin || '-'}}      
                            </el-form-item>
                        </div>

                    </div>
                    <div class="lis-item">
                        <div class="lis-i">
                            <el-form-item label="生产厂家：" prop="manufacturer">
                                {{ form.manufacturer || '-'}}      
                            </el-form-item>
                        </div>
                        <div class="lis-i">
                            <el-form-item label="执行标准：" prop="standard">
                                {{ form.carriedStandard || '-'}}    
                            </el-form-item>
                        </div>  


                    </div>
                    <div class="lis-item">
                        <div class="lis-i" style="width:100%">
                            <el-form-item label="物资图片：" prop="needValue">
                                <div style="width:100%;position: relative;display:flex;justify-content:flex-start;flex-wrap:wrap">
                                    <template v-if="form.activityImg.length">
                                        <el-image
                                        :src="item"
                                        :zoom-rate="1.2"
                                        :preview-src-list="[item]"
                                        :initial-index="4"
                                        style="width:160px;height:160px;margin-right:24px"
                                        v-for="(item,index) in form.activityImg"
                                        :key="index"
                                        />
                                    </template>
                                    <el-image
                                        v-else
                                        :src="'https://static.91medicine.net/jiuyang/img/404.png'"
                                        :zoom-rate="1.2"
                                        :preview-src-list="['https://static.91medicine.net/jiuyang/img/404.png']"
                                        style="width:160px;height:160px;margin-right:24px"                                            
                                    />
                                </div>

  
                            </el-form-item>
                        </div>
                    </div>

                    <div class="lis-item">
                        <div class="lis-i">
                            <el-form-item label="最新进价：" prop="purchasePrice">
                                {{ form.latestPurchasePrice || '-' }}  
                            </el-form-item>
                        </div>
                    </div>
                    <div class="lis-item" v-if="useUsage.length>0">
                        <div class="lis-i" style="width:100%">
                            <el-form-item label="用法用量：">
                                <div style="width:100%;margin-top:8px" class="normal-table" >
                                    <el-table :data="useUsage" style="width: 100%" stripe>
                                        <el-table-column prop="name" label="总剂量">
                                            <template #default="scoped">
                                                {{ scoped.row.usageTotalDose || '-'}}
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="date" label="单位">
           
                                            <template #default="scoped">
                                                {{ scoped.row.usageUnit || '-'}}
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="name" label="使用途径">
                                            <template #default="scoped">
                                                {{ scoped.row.usageWayOfUse?scoped.row.usageWayOfUse.join(','):'-' }}
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="name" label="单次用量">
                                            <template #default="scoped">
                                                {{ scoped.row.usageDosa || '-'}} 
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="name" label="使用频率">
                                            <template #default="scoped">
                                                {{ scoped.row.usageFrequency || '-'}}
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="name" label="使用天数">
                                            <template #default="scoped">
                                                {{ scoped.row.usageDays || '-'}}
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </el-form-item>
                        </div>
                    </div>
                    <div class="lis-head">
                        <div class="icon-view">
                            <div class="icon-view-on"></div>
                        </div>
                        <span class="label-name">自定义属性</span>

                    </div>
                    <div class="lis-item">
                        <div class="lis-i lis-i-other" v-for="(item,index) in goodsAttributesList" :key="index">
                            <div class="l-name">{{ item.fieldName }}</div>
                            <div>
                                {{ item.fieldValue }}
                            </div>
    
                        </div>
 
                    </div>
                </el-form>
            </div>
            <div class="info-lis" v-show="moduleType == '批发信息'">
                <el-form :model="batchForm" label-width="120px">
                    <div class="lis-item">
                        <div class="lis-i" style="width:100%">
                            <el-form-item label="批发状态：">
                                <span v-if="batchForm.wholesaleInfoState == 1">正常</span>
                                <span v-if="batchForm.wholesaleInfoState == 2">停发</span>
                            </el-form-item>
                        </div>

                    </div>
                    <div class="lis-item">
                        <div class="lis-i">
                            <el-form-item label="批发价：">
                                {{ batchForm.wholesaleInfoPrice || '-' }}
                            </el-form-item>
                        </div>
  
                    </div>
                    <div class="lis-item">
                        <div class="lis-i">
                            <el-form-item label="批发分类：" prop="category">
                                {{ batchForm.wholesaleInfoClassification?batchForm.wholesaleInfoClassification.join(','):'-' }} 
                            </el-form-item>
                        </div>
  
                    </div>
                    <div class="lis-item">
                        <div class="lis-i">
                            <el-form-item label="起购数量：" prop="number">
                                {{ batchForm.wholesaleInfoMinimumPurchase || '-' }} 
                            </el-form-item>
                        </div>
  
                    </div>
                    <div class="lis-item">
                        <div class="lis-i" style="width:100%">
                            <el-form-item label="物资详情：" prop="detail">
                                <div style="width:100%;word-wrap:;">
                                    {{ batchForm.wholesaleInfoDetails || '-' }}
                                </div>
                                <div style="width:100%;position: relative;display:flex;justify-content:flex-start;flex-wrap:wrap">
                                    <el-image
                                    :src="item"
                                    :zoom-rate="1.2"
                                    :preview-src-list="[item]"
                                    :initial-index="4"
                                    style="width:160px;height:160px;margin-right:24px"
                                    v-for="(item,index) in batchForm.wholesalepictureList"
                                    :key="index"
                                    />
                                </div>
                                
                            </el-form-item>
                        </div>

                    </div>

                </el-form>
            </div>
        </div>

    </div>
</template>
<style lang="less" scoped>
.normal-table{
    :deep(.el-table){
        border:1px solid #E3E3E3;
    }
    :deep(.el-table--enable-row-transition){
        .el-table__body td.el-table__cell{
            background: #fff; 
        }
    }
}
:deep(.el-table__inner-wrapper::before){
    display:none;
}
:deep(.el-table th.el-table__cell){
    background: #EBEBEB;

}
:deep(.el-dialog__body){
    padding:0 4px;
}
:deep(.el-table__header){
    tr{
        th{
            &:last-child{
                .cell{
                    border-right: 0px;
                }
            }
        }
    }
}
.page-contain{
    width: 100%;
    height: 100%;
    :deep(.el-table th > .cell){
        border-right: 0;;
    }
    :deep(.el-radio-button:first-child .el-radio-button__inner){
        border-left:1px solid #3480FF;
    }
    .info-contain{
        width: 100%;
        height: calc(100% - 48px);
        box-sizing: border-box;
        padding:16px 24px;
        .btn-opea{
            width: 100%;
            height: 32px;
        }
        .info-lis{
            width: 100%;
            height: calc(100% - 32px);
            box-sizing:border-box;
            padding-top:24px;
            overflow:auto;
            .lis-head{
                    width: 100%;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    padding-bottom:16px;
                    .icon-view{
                        margin-right: 8px;
                        position: relative;
                        width: 14px;
                        height: 14px;

                        &::before {
                            content: "";
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 10px;
                            height: 10px;
                            border-radius: 2px;
                            background-color: #10E7F9; 
                        }
                        .icon-view-on{
                            position: absolute;
                            bottom: 0;
                            right: 0;
                            width: 10px;
                            height: 10px;
                            border-radius: 2px;
                            background-color: #3480FF; /* 背景色 */
                        }
                    }
                    .label-name{
                        color: #000000;
                        font-weight: bold;
                        font-size: 14px;
                        margin-right: 8px;
                    }
                    img{
                        width: 14px;
                        height: 14px;
                        cursor: pointer;
                    }
                }
        }
        .lis-item{
            width: 100%;
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;
            .lis-i{
                width: calc(100% / 3);
                margin-bottom:10px;
            }
            .lis-i-other{
                display: flex;
                justify-content: flex-start;
                align-items: center;
                .l-name{
                    width: 80px;
                    text-align: right;
                    word-break: break-all;
                    word-wrap: break-word;
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                    min-height: 32px;
                    padding: 0 12px 0 0;
                    font-size: var(--el-form-label-font-size);
                    color: var(--el-text-color-regular);
                    line-height: 20px;
                }
                
            }
        }
    }
    :deep(.el-table__row){
        .el-input .el-input__wrapper{
            background: rgba(0,0,0,0);
        }
    }
}
.input-line{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom:16px;
    &:last-child{
        margin-bottom:0px;
    }
    img{
        cursor: pointer;
        width: 16px;
        height: 16px;
        margin-left:8px;
    }
}

</style>